<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>全栈开发(AngularJS原理) | 静待花开</title><meta name="author" content="brad 随风起舞"><meta name="copyright" content="brad 随风起舞"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="AngularJs的基本组件AngularJs允许开发者去建立一种健状的,易维护的基于MVC模型的应用结构。在实现AngularJs之前熟悉一下他的各种组件是非常重要的。  Module: 这是AngularJs的组件之一，一个Module是一个包含服务(services),控制层(controllers),过滤器(filter), 指令(directives),等等。在AngularJs中每个M">
<meta property="og:type" content="article">
<meta property="og:title" content="全栈开发(AngularJS原理)">
<meta property="og:url" content="https://zhangbo4881820.gitee.io/myblog/posts/45226/index.html">
<meta property="og:site_name" content="静待花开">
<meta property="og:description" content="AngularJs的基本组件AngularJs允许开发者去建立一种健状的,易维护的基于MVC模型的应用结构。在实现AngularJs之前熟悉一下他的各种组件是非常重要的。  Module: 这是AngularJs的组件之一，一个Module是一个包含服务(services),控制层(controllers),过滤器(filter), 指令(directives),等等。在AngularJs中每个M">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png">
<meta property="article:published_time" content="2019-11-01T06:35:19.000Z">
<meta property="article:modified_time" content="2023-09-07T09:44:01.883Z">
<meta property="article:author" content="brad 随风起舞">
<meta property="article:tag" content="实战">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png"><link rel="shortcut icon" href="/myblog/img/favicon.png"><link rel="canonical" href="https://zhangbo4881820.gitee.io/myblog/posts/45226/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/myblog/css/index.css"><link rel="stylesheet" href="/myblog/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="/myblog/css/fancybox.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
  root: '/myblog/',
  algolia: undefined,
  localSearch: {"path":"/myblog/search.xml","preload":false,"top_n_per_article":1,"unescape":false,"languages":{"hits_empty":"找不到您查询的内容：${query}","hits_stats":"共找到 ${hits} 篇文章"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  dateSuffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  },
  autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '全栈开发(AngularJS原理)',
  isPost: true,
  isHome: false,
  isHighlightShrink: true,
  isToc: true,
  postUpdate: '2023-09-07 17:44:01'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
    win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = url
      if (id) link.id = id
      link.onerror = reject
      link.onload = link.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        link.onload = link.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(link)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 7.0.0-rc2"><link rel="alternate" href="/myblog/atom.xml" title="静待花开" type="application/atom+xml">
</head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/myblog/archives/"><div class="headline">文章</div><div class="length-num">57</div></a><a href="/myblog/tags/"><div class="headline">标签</div><div class="length-num">20</div></a><a href="/myblog/categories/"><div class="headline">分类</div><div class="length-num">25</div></a></div><hr class="custom-hr"/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/myblog/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/myblog/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/myblog/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/myblog/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 分享</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/myblog/Gallery/"><i class="fa-fw fas fa-images"></i><span> 照片</span></a></li><li><a class="site-page child" href="/myblog/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/myblog/movies/"><i class="fa-fw fas fa-video"></i><span> 视频</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/myblog/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/myblog/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="not-top-img" id="page-header"><nav id="nav"><span id="blog-info"><a href="/myblog/" title="静待花开"><span class="site-name">静待花开</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/myblog/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/myblog/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/myblog/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/myblog/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 分享</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/myblog/Gallery/"><i class="fa-fw fas fa-images"></i><span> 照片</span></a></li><li><a class="site-page child" href="/myblog/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/myblog/movies/"><i class="fa-fw fas fa-video"></i><span> 视频</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/myblog/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/myblog/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav></header><main class="layout" id="content-inner"><div id="post"><div id="post-info"><h1 class="post-title">全栈开发(AngularJS原理)</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2019-11-01T06:35:19.000Z" title="发表于 2019-11-01 14:35:19">2019-11-01</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-09-07T09:44:01.883Z" title="更新于 2023-09-07 17:44:01">2023-09-07</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/myblog/categories/%E5%AE%9E%E6%88%98/">实战</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="全栈开发(AngularJS原理)"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div><article class="post-content" id="article-container"><h1 id="AngularJs的基本组件"><a href="#AngularJs的基本组件" class="headerlink" title="AngularJs的基本组件"></a>AngularJs的基本组件</h1><p>AngularJs允许开发者去建立一种健状的,易维护的基于MVC模型的应用结构。在实现AngularJs之前熟悉一下他的各种组件是非常重要的。</p>
<ol>
<li><p><strong>Module:</strong><br> 这是AngularJs的组件之一，一个Module是一个包含服务(services),控制层(controllers),过滤器(filter),<br> 指令(directives),等等。在AngularJs中每个Module都有自己的文件结构用于控制器或者指令等。<br> AngularJS中的每个视图页面都有一个模块。</p>
</li>
<li><p><strong>Scope:</strong><br> AngularJS中的作用域只是用于填充网页视图的数据的JavaScript表示。<br> 该数据可以来自任何来源，例如数据库或远程Web服务器。</p>
</li>
<li><p><strong>view:</strong><br> AngularJS中带有模板和指令的视图是AngularJS的其他组件，用于构建呈现给用户的HTML视图。</p>
</li>
<li><p><strong>Expression:</strong><br> 在HTML模板中添加表达式的功能是AngularJS的一项重要功能。表达式基本上与作用域链接。表达式有助于将应用程序数据绑定到HTML</p>
</li>
<li><p><strong>Controller:</strong><br> 控制器是MVC框架的组件。控制器将包含您的核心业务逻辑。它在AngularJS中的主要作用是在数据范围内将数据暴露到视图页面</p>
</li>
<li><p><strong>Data binding:</strong><br> 数据绑定是AngularJS中的一个重要特性。他是一个从model层到view层连接数据的程序,反之亦然。AngularJS支持两种数据绑定方式<br> 1. 当网页的数据发生改变，model层的数据也会更新<br> 2. 当model层的数据发生变化，然后页面视图将自动更新<br> <strong>model就是代表数据，view将数据投影出去</strong></p>
</li>
<li><p><strong>Services:</strong><br> AngularJS中的服务是为Web应用程序提供功能的单例对象</p>
</li>
<li><p><strong>Dependency injection:</strong><br> 依赖注入是在运行时注入依赖项的过程（即，使依赖组件可用于初始化代码的组件内的访问）。用于消费服务。例如，如果模块要求通过HTTP请求访问资源，则可以将HTTP服务注入到模块中以使功能在模块代码中可用。</p>
</li>
</ol>
<h1 id="AngularJs的生命周期"><a href="#AngularJs的生命周期" class="headerlink" title="AngularJs的生命周期"></a>AngularJs的生命周期</h1><p>既然了解了AngularJS应用程序中涉及的不同组件，接着说下AngularJS生命周期中发生的事情，该生命周期包括三个阶段：引导，编译和运行时。AngularJS的这些阶段发生在将网页加载到客户端的浏览器中时.为了在使用AngularJS开发的应用程序中设计和实现代码,所以了解AngularJS的生命周期是很重要的。</p>
<h2 id="Bootstrap-Phase-引导阶段"><a href="#Bootstrap-Phase-引导阶段" class="headerlink" title="Bootstrap Phase(引导阶段)"></a>Bootstrap Phase(引导阶段)</h2><p>引导阶段是AngularJS生命周期的第一阶段，发生在将AngularJS JavaScript库下载到客户端浏览器时。<br>下载JavaScript库后，AngularJS会初始化自己的组件并初始化ng-app指令所指向的应用程序模块。<br>此阶段的静态DOM已加载到浏览器中。</p>
<h2 id="Compilation-Phase-编译阶段"><a href="#Compilation-Phase-编译阶段" class="headerlink" title="Compilation Phase(编译阶段)"></a>Compilation Phase(编译阶段)</h2><p>HTML编译阶段是AngularJS生命周期的第二阶段。<br>在此阶段，将加载的静态DOM替换为动态DOM，以表示AngularJS视图。<br>然后将这些DOM从AngularJS内置库或自定义指令代码链接到适当的JavaScript函数</p>
<h2 id="Runtime-Data-Binding-Phase-运行阶段"><a href="#Runtime-Data-Binding-Phase-运行阶段" class="headerlink" title="Runtime Data Binding Phase(运行阶段)"></a>Runtime Data Binding Phase(运行阶段)</h2><p>这是AngularJS生命周期的最后阶段，只要用户不重新加载网页或不离开网页就可以存在。<br>在此阶段，对范围所做的任何更改都会反映在视图中，反之亦然。</p>
<h1 id="AngularJs的结构概念"><a href="#AngularJs的结构概念" class="headerlink" title="AngularJs的结构概念"></a>AngularJs的结构概念</h1><p>现在，您将了解AngularJS的体系结构概念。<br>将HTML文档加载到浏览器中并由浏览器评估时，首先加载AngularJS JavaScript文件，创建Angular全局对象，然后执行注册控制器功能的JavaScript。<br>然后，AngularJS扫描HTML查找AngularJS应用和视图，并找到与该视图相对应的控制器功能。<br>然后，AngularJS执行控制器功能，并使用通过控制器填充到模型中的数据来更新视图。<br>接下来，AngularJS监听浏览器事件，例如单击按钮，移动鼠标，更改输入字段等。<br>如果发生任何这些事件，则AngularJS将相应地更新视图。</p>
<p><img src="/myblog/../../../image/AngularJs-Architecture.png"></p>
<p>AngularJS包含一个模块，该模块充当不同类型的应用程序（例如视图，控制器，指令，服务等）的容器。<br>模块指定如何引导应用程序。然后，您有一个配置组件。路由用于将URL链接到控制器和视图。视图用于处理复杂事件。<br>它使用ng-view指令。<br>另外，还有一个控制器，该控制器控制AngularJS应用程序的数据，并由常规JavaScript对象组成。<br>AngularJS定义了一个ngcontroller指令，该指令使用控制器功能创建新的控制器对象。<br>AngularJS附带了一些内置服务，例如$http，$route，$window，$location等。<br>范围是指引用模型的对象。<br>它们起着将控制器与视图结合在一起的重要作用。</p>
<h1 id="MVC结构"><a href="#MVC结构" class="headerlink" title="MVC结构"></a>MVC结构</h1><p>AngularJS使用MVC架构来创建Web应用程序。<br>MVC体系结构是一种编程方法，旨在将应用程序分为三个核心组件：模型，视图和控制器。<br>这三个组件组合在一起构成您的应用程序</p>
<p>下图展示MVC结构图</p>
<p><img src="/myblog/../../../image/AngularJs-MVC-Architecture.png"></p>
<p>当用户通过浏览器发送HTTP请求时，该请求将由控制器接收。<br>控制器处理该请求，并将请求发送到模型以提供适当的数据。<br>作为响应的模型再次将结果数据数组提供给控制器。<br>控制器再次将数据处理为所需格式，然后将其发送到视图。<br>该视图通过UI内容表示数据，并将其发送到控制器。<br>最后，控制器将HTTP响应发送到浏览器</p>
<ul>
<li><p><strong>AngularJS视图</strong> 用于在Web浏览器中为用户生成信息的输出表示，例如图表或图表。<br>AngularJS通过提取为应用程序定义的所有模板来构建DOM中的视图。<br>因此，开发人员在这里的工作是仅使用HTML和CSS来创建模板</p>
</li>
<li><p><strong>AngularJS模型</strong> 包含用于存储应用程序模型的$scope对象,因此无需像其他JavaScript客户端框架一样创建JavaScript模型类。<br>范围已附加到DOM，有助于大大简化JavaScript问题。</p>
</li>
<li><p><strong>The AngularJS controller</strong> 是您定义特定于特定视图的所有业务逻辑的地方.控制器将模型和视图保持在一起</p>
</li>
</ul>
<h1 id="设置开发环境"><a href="#设置开发环境" class="headerlink" title="设置开发环境"></a>设置开发环境</h1><h2 id="将AngularJS添加到spring-boot项目里"><a href="#将AngularJS添加到spring-boot项目里" class="headerlink" title="将AngularJS添加到spring boot项目里"></a>将AngularJS添加到spring boot项目里</h2><p>通过下来三种方式。</p>
<ul>
<li><p>从Google CDN包含一个Angular scripts</p>
</li>
<li><p>在本地下载和托管Angular文件</p>
</li>
<li><p>在spring boot 项目的pom.xml中提供依赖信息</p>
</li>
</ul>
<h3 id="从Google-CDN包含一个Angular-scripts"><a href="#从Google-CDN包含一个Angular-scripts" class="headerlink" title="从Google CDN包含一个Angular scripts"></a>从Google CDN包含一个Angular scripts</h3><ul>
<li><p>angular.min.js: 这是压缩版本，用于生产环境。</p>
</li>
<li><p>angular.js: 这不是压缩版，人可以读懂的版本，应该用于开发环境</p>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;!doctype html&gt; </span><br><span class="line">&lt;html ng-app&gt; </span><br><span class="line">&lt;head&gt; </span><br><span class="line">&lt;title&gt;Angular Application&lt;/title&gt; </span><br><span class="line">&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js&quot;&gt;&lt;/ script&gt; </span><br><span class="line">&lt;/head&gt; </span><br><span class="line">&lt;body&gt;&lt;/body&gt; </span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>

<h3 id="在本地下载和托管Angular文件"><a href="#在本地下载和托管Angular文件" class="headerlink" title="在本地下载和托管Angular文件"></a>在本地下载和托管Angular文件</h3><p>想要脱机使用Angular或希望在自己的服务器上托管Angular文件的开发人员可以选择此选项,导航到<br><a href="https://code.angularjs.org/">这里</a> 并从Angular版本列表中下载所需的版本。或者，您可以从<br><a href="https://angularjs.org/">官网</a> 下载Angular的最新稳定版本。</p>
<h3 id="在spring-boot-项目的pom-xml中提供依赖信息"><a href="#在spring-boot-项目的pom-xml中提供依赖信息" class="headerlink" title="在spring boot 项目的pom.xml中提供依赖信息"></a>在spring boot 项目的pom.xml中提供依赖信息</h3><p>无需手动下载AngularJS库，您可以在开发SpringBoot应用程序时在pom.xml中提供AngularJS的依赖项信息，以便将AngularJS自动下载到该库中。</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;dependency&gt; </span><br><span class="line">&lt;groupId&gt;org.webjars&lt;/groupId&gt; </span><br><span class="line">&lt;artifactId&gt;angularjs&lt;/artifactId&gt; </span><br><span class="line">&lt;version&gt;1.4.9&lt;/version&gt; </span><br><span class="line">&lt;scope&gt;runtime&lt;/scope&gt; </span><br><span class="line">&lt;/dependency&gt; </span><br><span class="line">&lt;dependency&gt; </span><br><span class="line">&lt;groupId&gt;org.webjars&lt;/groupId&gt; </span><br><span class="line">&lt;artifactId&gt;bootstrap&lt;/artifactId&gt; </span><br><span class="line">&lt;version&gt;3.3.6&lt;/version&gt; </span><br><span class="line">&lt;scope&gt;runtime&lt;/scope&gt; </span><br><span class="line">&lt;/dependency&gt;</span><br></pre></td></tr></table></figure>

<h2 id="添加Twitter-Bootstrap到spring-boot"><a href="#添加Twitter-Bootstrap到spring-boot" class="headerlink" title="添加Twitter Bootstrap到spring boot"></a>添加Twitter Bootstrap到spring boot</h2><p>Twitter Bootstrap是一个前端框架，旨在简化响应式设计。Bootstrap CSS框架可用于设置网站内容的样式。<br>您可以创建自己的CSS样式以使您的网站看起来很棒，但是Bootstrap提供了一组不错的CSS样式，可让您设计出真正美观的内容布局。<br>在使用AngularJS时，实际上并不需要使用Bootstrap，并且AngularJS和Bootstrap之间没有内在的关系，因为两者都是不同的软件包。<br>要使用Bootstrap的CSS框架中的CSS，可以在开发SpringBoot应用程序时在pom.xml中定义一个依赖项，例如上面的代码。这样它将自动下载到库文件夹中。<br>另外，可以从 <a href="https://getbootstrap.com/">https://getbootstrap.com/</a> 下载Bootstrap存档，其中也包含CSS和JavaScript文件</p>
<h2 id="开发单页面应用"><a href="#开发单页面应用" class="headerlink" title="开发单页面应用"></a>开发单页面应用</h2><p>单页应用程序是具有一个入口点HTML页面（可以是index.html）的应用程序；<br>所有应用程序内容都会动态的添加到该页面或从该页面删除。<br>在运行时，基于某些事件，将删除附加到标签的现有内容，然后将动态内容附加到同一标签。<br>可以在包含&lt;div ng-view&gt;&lt;/div&gt;标记的index.html中看到单页应用程序的入口点,其中所有动态内容都插入到index.html<br>因此,用户无需等待新页面加载,在短时间内新内容就动态显示出来了。</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt; </span><br><span class="line">&lt;html lang=&quot;en&quot; ng-app=&quot;userregistrationsystem&quot;&gt; </span><br><span class="line">&lt;head&gt; ... &lt;/head&gt; </span><br><span class="line">&lt;body&gt; </span><br><span class="line">	... </span><br><span class="line">	&lt;div ng-view&gt;&lt;/div&gt; </span><br><span class="line">	... </span><br><span class="line">	&lt;script src=&quot;/webjars/angularjs/1.4.9/angular.js&quot;&gt;&lt;/script&gt; </span><br><span class="line">	&lt;script src=&quot;/webjars/angularjs/1.4.9/angular-resource.js&quot;&gt;&lt;/script&gt; </span><br><span class="line">	&lt;script src=&quot;/webjars/angularjs/1.4.9/angular-route.js&quot;&gt;&lt;/script&gt; </span><br><span class="line">	&lt;script src=&quot;/js/app.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;/js/controller.js&quot;&gt;&lt;/script&gt; </span><br><span class="line">	&lt;link rel=&quot;stylesheet&quot; href=&quot;/webjars/bootstrap/3.3.6/css/bootstrap.css&quot;&gt; </span><br><span class="line">&lt;/body&gt; </span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>你这个代码例子中做的一些事你需要知道。</p>
<ol>
<li><p>将&lt;script&gt;标记放在页面底部以缩短应用程序的加载时间，因为Angular脚本的加载不会影响HTML的加载</p>
</li>
<li><p>如果您希望Angular自动引导您的应用程序，请将ng-app放置在应用程序的根目录中，通常放置在&lt;html&gt;标记上</p>
</li>
</ol>
<h2 id="引导应用程序"><a href="#引导应用程序" class="headerlink" title="引导应用程序"></a>引导应用程序</h2><p>引导AngularJS是通过将ng-app添加到HTML中的元素中来初始化或启动Angular应用的过程，如上例子</p>
<p>这也称为自动初始化。因此，当AngularJS在分析index.html文件后找到ng-app指令时，它将加载关联的模块，然后编译DOM。<br>AngularJS应用程序UserRegistrationSystem在app.js中定义为AngularJS模块（angular.module），这是应用程序的入口。</p>
<p><code>var app = angular.module(&#39;userregistrationsystem&#39;, [&#39;ngRoute&#39;, &#39;ngResource&#39;]);</code></p>
<p>变量app在app.js中可以被命名为任何名字</p>
<h2 id="依赖注入"><a href="#依赖注入" class="headerlink" title="依赖注入"></a>依赖注入</h2><p>依赖性注入是一种设计模式，用于在应用程序中定义依赖性作为配置的一部分，而不是在组件中对其进行硬编码。<br>DI帮助您避免手动创建应用程序依赖项，并可以在需要时进行更改。当应用程序首次启动时，AngularJS使用DI来加载模块依赖性</p>
<p><strong>依赖注入的优点：</strong></p>
<ol>
<li><p>它分离了创建依赖项及其使用的过程。</p>
</li>
<li><p>消费者会觉得创建依赖项的过程正在由其他人处理，用户只需要担心如何使用依赖项。</p>
</li>
<li><p>它提供了在需要时更改依赖关系的功能</p>
</li>
<li><p>它使应用程序更具可测试性。</p>
</li>
</ol>
<p>正如你所见，先前代码中。userregistrationsystem模块启动的时候有两个依赖项被定义了。</p>
<p>先前代码中的两个依赖关系在模块定义的数组中定义：</p>
<ol>
<li><p><strong>ngRoute：</strong><br> 第一个依赖项是AngularJS ngRoute模块，该模块提供到应用程序的路由。<br> ngRoute模块用于将URL深度链接到控制器和视图（HTML局部）</p>
</li>
<li><p><strong>ngResource：</strong><br> 第二个依赖性是AngularJS ngResource模块，该模块提供与RESTful服务的交互支持。</p>
</li>
</ol>
<h2 id="AngularJS-Routes"><a href="#AngularJS-Routes" class="headerlink" title="AngularJS Routes"></a>AngularJS Routes</h2><p>AngularJS路由是使用$routeProvider的API配置的。路由依赖于ngRoute模块，这就是为什么它的依赖关系在模块定义的数组中定义的原因。</p>
<p>您将在AngularJS应用程序(app.js)中定义四个路由。增删改查4个路由</p>
<ol>
<li><p>第一个 /list-all-users.</p>
</li>
<li><p>第二个 /register-new-user.</p>
</li>
<li><p>第三个 /update-user/:id.</p>
</li>
<li><p>第四个 不同于其他三个</p>
</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">app.config(function($routeProvider) &#123; </span><br><span class="line">	$routeProvider </span><br><span class="line">		.when(&#x27;/list-all-users&#x27;, &#123; </span><br><span class="line">				templateUrl : &#x27;/template/listuser.html&#x27;, </span><br><span class="line">				controller : &#x27;listUserController&#x27; </span><br><span class="line">		&#125;).when(&#x27;/register-new-user&#x27;,&#123; </span><br><span class="line">				templateUrl : &#x27;/template/userregistration.html&#x27;, </span><br><span class="line">				controller : &#x27;registerUserController&#x27; </span><br><span class="line">		&#125;).when(&#x27;/update-user/:id&#x27;,&#123; </span><br><span class="line">				templateUrl : &#x27;/template/userupdation.html&#x27; , </span><br><span class="line">				controller : &#x27;usersDetailsController&#x27; </span><br><span class="line">		&#125;).otherwise(&#123; </span><br><span class="line">				redirectTo : &#x27;/home&#x27;, </span><br><span class="line">				templateUrl : &#x27;/template/home.html&#x27;, </span><br><span class="line">		&#125;); </span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>当用户单击http:&#x2F;/localhost:8080/\＃/list-all-users中指定的应用程序中的链接时,将遵循<br>/list-all-users路由，并且与/list-all-users相关连的内容展示给用户<br>同样，当用户单击链接http://localhost：8080/\＃/register-new-user时,将遵循/register-newuser路由,并显示与<br>/register-new-user URL相关的内容。<br>当用户单击链接http://localhost:8080/\＃/update-user/{id}时，将遵循/update-user/:id路由，以及与<br>/update-user/:id相关的内容URL将会显示。<br>同样，如果用户访问这三个URL以外的任何URL，将遵循/home路由，并显示与/home URL相关的内容。</p>
<h2 id="AngularJS-Templates"><a href="#AngularJS-Templates" class="headerlink" title="AngularJS Templates"></a>AngularJS Templates</h2><p>AngularJS模板(也称为HTML部分)是绑定到index.html文件中显示的&lt;div ng-view&gt;&lt;/div&gt;标记的HTML代码。<br>如果查看app.js文件中的代码,则可以看到为不同的路由定义了不同的templateUrl值</p>
<p>在上面的例子中,您已经定义了四个不同的局部或模板。<br>listuser.html，<br>userregistration.html，<br>userupdation.html<br>home.html<br>四个不同的部分或模板的页面包含了HTML代码和AngularJS的内置模板语言，可在模板中显示动态数据</p>
<h2 id="实现-the-Model-View-and-Controller-在你的单页面应用中"><a href="#实现-the-Model-View-and-Controller-在你的单页面应用中" class="headerlink" title="实现 the Model, View, and Controller 在你的单页面应用中"></a>实现 the Model, View, and Controller 在你的单页面应用中</h2><p>默认情况下，Spring Boot将自动从ServletContext的根目录或以下目录中提供静态内容</p>
<ul>
<li><p><strong>classpath:/META-INF/resources/</strong></p>
</li>
<li><p><strong>classpath:/resources/</strong></p>
</li>
<li><p><strong>classpath:/static/</strong></p>
</li>
<li><p><strong>classpath:/public/</strong></p>
</li>
</ul>
<h2 id="创建-Home-Application-页面"><a href="#创建-Home-Application-页面" class="headerlink" title="创建 Home/Application 页面"></a>创建 Home/Application 页面</h2><p>单页应用程序的核心是静态页面index.html,如上面例子,因此让我们<br>在src/main/resources/static(或src/main/resources/public)目录中创建它。<br>这个index.html页面将包含一些前端代码以显示网页上的链接,这些代码将由AngularJS处理。<br>此src/main/resources/static/index.html页面还包含一些&lt;script&gt;标记,其中包含所有必需的AngularJS文件。</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=&quot;zh&quot; ng-app=&quot;userregistrationsystem&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;title&gt;全栈开发&lt;/title&gt;</span><br><span class="line">    &lt;link rel=&quot;stylesheet&quot; href=&quot;/css/app.css&quot;&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;div class=&quot;page-header text-center&quot;&gt;</span><br><span class="line">    &lt;h2&gt;User Registration System&lt;/h2&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line"></span><br><span class="line">&lt;nav class=&quot;navbar navbar-default&quot;&gt;</span><br><span class="line">    &lt;div class=&quot;container-fluid&quot;&gt;&lt;a href=&quot;#/&quot; class=&quot;btn btn-info navbar-btn&quot; role=&quot;button&quot;&gt; Home &lt;/a&gt;</span><br><span class="line">        &lt;a href=&quot;#/register-new-user&quot; class=&quot;btn btn-info navbar-btn&quot; role=&quot;button&quot;&gt; Register New User&lt;/a&gt;</span><br><span class="line">        &lt;a href=&quot;#/list-all-users&quot; class=&quot;btn btn-info&quot; role=&quot;button&quot;&gt; List All Users &lt;/a&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/nav&gt;</span><br><span class="line"></span><br><span class="line">&lt;div ng-view&gt;&lt;/div&gt;</span><br><span class="line">&lt;script src=&quot;/webjars/angularjs/1.4.9/angular.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">&lt;script src=&quot;/webjars/angularjs/1.4.9/angular-resource.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">&lt;script src=&quot;/webjars/angularjs/1.4.9/angular-route.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">&lt;script src=&quot;/js/app.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">&lt;script src=&quot;/js/controller.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">&lt;link rel=&quot;stylesheet&quot; href=&quot;/webjars/bootstrap/3.3.6/css/bootstrap.css&quot;&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>让我们更详细地看一下前面的代码。<br>AngularJS库启用了几个用于标准HTML标签的自定义属性。</p>
<ol>
<li><p>index.html页面中的<code>&lt;html&gt;</code>标记具有ng-app&#x3D;”userregistrationsystem”,这就指示你定义的JavaScript模块名为 userregistrationsystem 会被Angular识别</p>
</li>
<li><p>所有CSS类均来自（Twitter）Bootstrap，以使页面看起来更漂亮</p>
</li>
<li><p>AngularJS和Bootstrap引导包被包括在所述<code>&lt;body&gt;</code>标签的底部,如图所示在前面的代码,使得它得到处理之前,浏览器可以处理<br>整个HTML</p>
</li>
<li><p>您还包括了一个单独的app.js，您将在其中定义应用程序的行为。</p>
</li>
</ol>
<h2 id="创建视图页面"><a href="#创建视图页面" class="headerlink" title="创建视图页面"></a>创建视图页面</h2><p>让我们在src/main/resources/static目录下的template文件夹中创建四个视图页面</p>
<ol>
<li><p>Home page: src/main/resources/template/home.html</p>
</li>
<li><p>Register New User page: src/main/resources/template/userregistration.html</p>
</li>
<li><p>List Of User page: src/main/resources/template/listUser.html</p>
</li>
<li><p>Update Existing User page: src/main/resources/template/userUpdation.html</p>
</li>
</ol>
<h3 id="Home-Page"><a href="#Home-Page" class="headerlink" title="Home Page"></a><strong>Home Page</strong></h3><p>下面展示下home.html的代码.</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;div class=&quot;container&quot;&gt;</span><br><span class="line">    &lt;div class=&quot;panel panel-default &quot;&gt;</span><br><span class="line">        &lt;div class=&quot;alert alert-success&quot;&gt;</span><br><span class="line">            &lt;span class=&quot;lead&quot;&gt; Welcome to User Registration System &lt;/span&gt;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">        &lt;div class=&quot;panel-body &quot;&gt;</span><br><span class="line">            &lt;div class=&quot;alert alert-info&quot;&gt;</span><br><span class="line">                &lt;ul&gt;</span><br><span class="line">                    &lt;li&gt; Please click on &lt;strong&gt;Register New User&lt;/strong&gt; to register a new user.&lt;/li&gt;</span><br><span class="line">                    &lt;li&gt; Please click on &lt;strong&gt;List All Users&lt;/strong&gt; to get all users.&lt;/li&gt;</span><br><span class="line">                &lt;/ul&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<p>在这个页面中,仅仅展示一些静态的欢迎信息.</p>
<h3 id="Register-New-User-page"><a href="#Register-New-User-page" class="headerlink" title="Register New User page"></a><strong>Register New User page</strong></h3><figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;div class=&quot;container&quot;&gt;</span><br><span class="line">    &lt;div class=&quot;alert alert-danger&quot; role=&quot;alert&quot; ng-if=&quot;errorMessage&quot;&gt; &#123;&#123;errorMessage&#125;&#125;&lt;/div&gt;</span><br><span class="line">    &lt;div class=&quot;panel panel-default &quot;&gt;</span><br><span class="line">        &lt;div class=&quot;alert alert-success&quot;&gt;&lt;span class=&quot;lead&quot;&gt;Register New User&lt;/span&gt;</span><br><span class="line">            &lt;p&gt;Please maintain uniqueness of User-Name&lt;/p&gt;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">        &lt;div class=&quot;panel-body &quot;&gt;</span><br><span class="line">            &lt;div class=&quot;container&quot;&gt;</span><br><span class="line">                &lt;form ng-submit=&quot;submitUserForm()&quot; name=&quot;myForm&quot; class=&quot;form-horizontal&quot;&gt;</span><br><span class="line">                    &lt;div class=&quot;row&quot;&gt;</span><br><span class="line">                        &lt;div class=&quot;form-group col-md-12&quot;&gt;</span><br><span class="line">                            &lt;label class=&quot;col-md-2 control-lable&quot; for=&quot;uname&quot;&gt; Name &lt;/label&gt;</span><br><span class="line">                            &lt;div class=&quot;col-md-7&quot;&gt;</span><br><span class="line">                                &lt;input type=&quot;text&quot; ng-model=&quot;user.name&quot; id=&quot;uname&quot; class=&quot;form-control input-sm&quot;</span><br><span class="line">                                       placeholder=&quot;Enter user name&quot;/&gt;</span><br><span class="line">                            &lt;/div&gt;</span><br><span class="line">                        &lt;/div&gt;</span><br><span class="line">                    &lt;/div&gt;</span><br><span class="line">                    &lt;div class=&quot;row&quot;&gt;</span><br><span class="line">                        &lt;div class=&quot;form-group col-md-12&quot;&gt;&lt;label class=&quot;col-md-2 control-lable&quot; for=&quot;address&quot;&gt;</span><br><span class="line">                            Address &lt;/label&gt;</span><br><span class="line">                            &lt;div class=&quot;col-md-7&quot;&gt;&lt;input type=&quot;text&quot; ng-model=&quot;user.address&quot; id=&quot;address&quot;</span><br><span class="line">                                                         class=&quot;form-control input-sm&quot;</span><br><span class="line">                                                         placeholder=&quot;Enter User Address.&quot;/&gt;</span><br><span class="line">                            &lt;/div&gt;</span><br><span class="line">                        &lt;/div&gt;</span><br><span class="line">                    &lt;/div&gt;</span><br><span class="line">                    &lt;div class=&quot;row&quot;&gt;</span><br><span class="line">                        &lt;div class=&quot;form-group col-md-12&quot;&gt;&lt;label class=&quot;col-md-2 control-lable&quot; for=&quot;email&quot;&gt;</span><br><span class="line">                            Email &lt;/label&gt;</span><br><span class="line">                            &lt;div class=&quot;col-md-7&quot;&gt;&lt;input type=&quot;email&quot; ng-model=&quot;user.email&quot; id=&quot;email&quot;</span><br><span class="line">                                                         class=&quot;form-control input-sm&quot; placeholder=&quot;Enter User Email&quot;/&gt;</span><br><span class="line">                            &lt;/div&gt;</span><br><span class="line">                        &lt;/div&gt;</span><br><span class="line">                    &lt;/div&gt;</span><br><span class="line">                    &lt;div class=&quot;row&quot;&gt;</span><br><span class="line">                        &lt;div class=&quot;form-actions floatRight&quot;&gt;</span><br><span class="line">                            &lt;input type=&quot;submit&quot; value=&quot;Register User&quot;</span><br><span class="line">                                   class=&quot;btn btn-primary btn-sm&quot;&gt;</span><br><span class="line">                            &lt;button type=&quot;button&quot; ng-click=&quot;resetForm()&quot; class=&quot;btn btn-warning btn-sm&quot;&gt;Reset Form</span><br><span class="line">                            &lt;/button&gt;</span><br><span class="line">                        &lt;/div&gt;</span><br><span class="line">                    &lt;/div&gt;</span><br><span class="line"></span><br><span class="line">                &lt;/form&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<p>在userregistration.html页面中错误信息被双大括号装饰,意思就是从AngularJs的app.js中定义的controller中返回指定变量的值</p>
<h3 id="List-of-Users"><a href="#List-of-Users" class="headerlink" title="List of Users"></a>List of Users</h3><figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;div class=&quot;container&quot;&gt;</span><br><span class="line">    &lt;div class=&quot;panel panel-default &quot;&gt;</span><br><span class="line">        &lt;div class=&quot;alert alert-info&quot;&gt;&lt;span class=&quot;lead&quot;&gt;List of Users &lt;/span&gt;&lt;/div&gt;</span><br><span class="line">        &lt;div class=&quot;panel-body &quot;&gt;</span><br><span class="line">            &lt;div class=&quot;table-responsive&quot;&gt;</span><br><span class="line">                &lt;table class=&quot;table table-hover table-bordered &quot;&gt;</span><br><span class="line">                    &lt;thead&gt;</span><br><span class="line">                    &lt;tr&gt;</span><br><span class="line">                        &lt;th&gt;Name&lt;/th&gt;</span><br><span class="line">                        &lt;th&gt;Email&lt;/th&gt;</span><br><span class="line">                        &lt;th&gt;Address&lt;/th&gt;</span><br><span class="line">                        &lt;th width=&quot;100&quot;&gt;Edit&lt;/th&gt;</span><br><span class="line">                        &lt;th width=&quot;100&quot;&gt;Delete&lt;/th&gt;</span><br><span class="line">                    &lt;/tr&gt;</span><br><span class="line">                    &lt;/thead&gt;</span><br><span class="line">                    &lt;tbody&gt;</span><br><span class="line">                    &lt;tr ng-repeat=&quot;user in users&quot;&gt;</span><br><span class="line">                        &lt;td&gt;&#123;&#123;user.name&#125;&#125;&lt;/td&gt;</span><br><span class="line">                        &lt;td&gt;&#123;&#123;user.email&#125;&#125;&lt;/td&gt;</span><br><span class="line">                        &lt;td&gt;&#123;&#123;user.address&#125;&#125;&lt;/td&gt;</span><br><span class="line">                        &lt;td&gt;</span><br><span class="line">                            &lt;button type=&quot;button&quot; ng-click=&quot;editUser(user.id)&quot; class=&quot;btn btn-primary custom-width&quot;&gt;</span><br><span class="line">                                &lt;span class=&quot;glyphicon glyphicon-edit&quot;&gt; &lt;/span&gt; Edit</span><br><span class="line">                            &lt;/button&gt;</span><br><span class="line">                        &lt;/td&gt;</span><br><span class="line">                        &lt;td&gt;</span><br><span class="line">                            &lt;button type=&quot;button&quot; ng-click=&quot;deleteUser(user.id)&quot; class=&quot;btn btn-danger custom-width&quot;&gt;</span><br><span class="line">                                &lt;span class=&quot;glyphicon glyphicon-remove&quot;&gt; &lt;/span&gt; Delete</span><br><span class="line">                            &lt;/button&gt;</span><br><span class="line">                        &lt;/td&gt;</span><br><span class="line">                    &lt;/tr&gt;</span><br><span class="line">                    &lt;/tbody&gt;</span><br><span class="line">                &lt;/table&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<p>这个页面中的,user.name,user.email,user.address,也是用双大括号包裹起来,意思也是从定义的controller中取值</p>
<h3 id="Update-Existing-User"><a href="#Update-Existing-User" class="headerlink" title="Update Existing User"></a>Update Existing User</h3><figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;div class=&quot;container&quot;&gt;</span><br><span class="line">    &lt;div class=&quot;alert alert-danger&quot; role=&quot;alert&quot; ng-if=&quot;errorMessage&quot;&gt; &#123;&#123;errorMessage&#125;&#125;&lt;/div&gt;</span><br><span class="line">    &lt;div class=&quot;panel panel-default &quot;&gt;</span><br><span class="line">        &lt;div class=&quot;alert alert-success&quot;&gt;&lt;span class=&quot;lead&quot;&gt;Update Existing User&lt;/span&gt;</span><br><span class="line">            &lt;p&gt;Please maintain uniqueness of User-Name&lt;/p&gt;&lt;/div&gt;</span><br><span class="line">        &lt;div class=&quot;panel-body &quot;&gt;</span><br><span class="line">            &lt;div class=&quot;container&quot;&gt;</span><br><span class="line">                &lt;form ng-submit=&quot;submitUserForm()&quot; name=&quot;myForm&quot; class=&quot;form-horizontal&quot;&gt;</span><br><span class="line">                    &lt;div class=&quot;row&quot;&gt;</span><br><span class="line">                        &lt;div class=&quot;form-group col-md-12&quot;&gt;&lt;label class=&quot;col-md-2 control-lable&quot; for=&quot;uname&quot;&gt;</span><br><span class="line">                            Name &lt;/label&gt;</span><br><span class="line">                            &lt;div class=&quot;col-md-7&quot;&gt;&lt;input type=&quot;text&quot; ng-model=&quot;user.name&quot; id=&quot;uname&quot;</span><br><span class="line">                                                         class=&quot;form-control input-sm&quot; placeholder=&quot;Enter user name&quot;/&gt;</span><br><span class="line">                            &lt;/div&gt;</span><br><span class="line">                        &lt;/div&gt;</span><br><span class="line">                    &lt;/div&gt;</span><br><span class="line">                    &lt;div class=&quot;row&quot;&gt;</span><br><span class="line">                        &lt;div class=&quot;form-group col-md-12&quot;&gt;&lt;label class=&quot;col-md-2 control-lable&quot;</span><br><span class="line">                                                                 for=&quot;address&quot;&gt;Address&lt;/label&gt;</span><br><span class="line">                            &lt;div class=&quot;col-md-7&quot;&gt;&lt;input type=&quot;text&quot; ng-model=&quot;user.address&quot; id=&quot;address&quot;</span><br><span class="line">                                                         class=&quot;form-control input-sm&quot;</span><br><span class="line">                                                         placeholder=&quot;Enter User Address.&quot;/&gt;</span><br><span class="line">                            &lt;/div&gt;</span><br><span class="line">                        &lt;/div&gt;</span><br><span class="line">                    &lt;/div&gt;</span><br><span class="line">                    &lt;div class=&quot;row&quot;&gt;</span><br><span class="line">                        &lt;div class=&quot;form-group col-md-12&quot;&gt;&lt;label class=&quot;col-md-2 control-lable&quot;</span><br><span class="line">                                                                 for=&quot;email&quot;&gt;Email&lt;/label&gt;</span><br><span class="line">                            &lt;div class=&quot;col-md-7&quot;&gt;&lt;input type=&quot;email&quot; ng-model=&quot;user.email&quot;</span><br><span class="line">                                                         id=&quot;email&quot; class=&quot;form-control input-sm&quot;</span><br><span class="line">                                                         placeholder=&quot;Enter User Email&quot;/&gt;</span><br><span class="line">                            &lt;/div&gt;</span><br><span class="line">                        &lt;/div&gt;</span><br><span class="line">                    &lt;/div&gt;</span><br><span class="line">                    &lt;div class=&quot;row&quot;&gt;</span><br><span class="line">                        &lt;div class=&quot;form-actions floatRight&quot;&gt;&lt;input type=&quot;submit&quot; value=&quot;Update User&quot;</span><br><span class="line">                                                                    class=&quot;btn btn-primary btn-sm&quot;&gt;</span><br><span class="line">                            &lt;button type=&quot;button&quot; ng-click=&quot;resetForm()&quot; class=&quot;btn btn-warning btn-sm&quot;&gt; Reset Form</span><br><span class="line">                            &lt;/button&gt;</span><br><span class="line">                        &lt;/div&gt;</span><br><span class="line">                    &lt;/div&gt;</span><br><span class="line">                &lt;/form&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>

<p>这是当我们点击Edit按钮出现的页面userupdation.html</p>
<h2 id="创建AngulaarJS-JS模块"><a href="#创建AngulaarJS-JS模块" class="headerlink" title="创建AngulaarJS JS模块"></a>创建AngulaarJS JS模块</h2><p>让我们在src/main/resources/static/js/app.js文件中创建一个名为app的AngularJS应用程序，该应用程序定义应用程序模块的配置和路由。要处理类似/home的请求，它需要一个名为ngRoute的AngularJS模块。要使用ngRoute并将其注入到您的应用程序中，请使用angular。模块将ngRoute模块添加到您的应用中</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">var app = angular.module(&#x27;userregistrationsystem&#x27;, [&#x27;ngRoute&#x27;, &#x27;ngResource&#x27;]);</span><br><span class="line">app.config(function ($routeProvider) &#123;</span><br><span class="line">    $routeProvider.when(&#x27;/list-all-users&#x27;, &#123;</span><br><span class="line">        templateUrl: &#x27;/template/listuser.html&#x27;,</span><br><span class="line">        controller: &#x27;listUserController&#x27;</span><br><span class="line">    &#125;).when(&#x27;/register-new-user&#x27;, &#123;</span><br><span class="line">        templateUrl: &#x27;/template/userregistration.html&#x27;,</span><br><span class="line">        controller: &#x27;registerUserController&#x27;</span><br><span class="line">    &#125;).when(&#x27;/update-user/:id&#x27;, &#123;</span><br><span class="line">        templateUrl: &#x27;/template/userupdation.html&#x27;, controller: &#x27;usersDetailsController&#x27;</span><br><span class="line">    &#125;).otherwise(&#123;redirectTo: &#x27;/home&#x27;, templateUrl: &#x27;/template/home.html&#x27;,&#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>在这个App.js中每个路由映射一个模板页面,和一个controller.</p>
<ul>
<li><p>当你导航到URL/list-all-users的时候将会调用listUserController</p>
</li>
<li><p>当你导航到URL/register-new-user的时候将会调用registerUserController</p>
</li>
<li><p>当你导航到URL/update-user&#x2F;:id的时候将会调用registerUserController</p>
</li>
</ul>
<p>在这部分,你在app.js中创建了app应用,接下来创建三个控制层名字分别为.listUserController,registerUserController,<br>registerUserController</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">app.controller(&#x27;registerUserController&#x27;, function ($scope, $http, $location, $route) &#123;</span><br><span class="line">    $scope.submitUserForm = function () &#123;</span><br><span class="line">        $http(&#123;method: &#x27;POST&#x27;, url: &#x27;http://localhost:8080/api/user/&#x27;, data: $scope.user,&#125;).then(function (response) &#123;</span><br><span class="line">            $location.path(&quot;/list-all-users&quot;);</span><br><span class="line">            $route.reload();</span><br><span class="line">        &#125;, function (errResponse) &#123;</span><br><span class="line">            $scope.errorMessage = errResponse.data.errorMessage;</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;</span><br><span class="line">    $scope.resetForm = function () &#123;</span><br><span class="line">        $scope.user = null;</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">app.controller(&#x27;listUserController&#x27;, function ($scope, $http, $location, $route) &#123;</span><br><span class="line">    $http(&#123;method: &#x27;GET&#x27;, url: &#x27;http://localhost:8080/api/user/&#x27;&#125;).then(function (response) &#123;</span><br><span class="line">        $scope.users = response.data;</span><br><span class="line">    &#125;);</span><br><span class="line">    $scope.editUser = function (userId) &#123;</span><br><span class="line">        $location.path(&quot;/update-user/&quot; + userId);</span><br><span class="line">    &#125;</span><br><span class="line">    $scope.deleteUser = function (userId) &#123;</span><br><span class="line">        $http(&#123;method: &#x27;DELETE&#x27;, url: &#x27;http://localhost:8080/api/user/&#x27; + userId&#125;).then(function (response) &#123;</span><br><span class="line">            $location.path(&quot;/list-allusers&quot;);</span><br><span class="line">            $route.reload();</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">app.controller(&#x27;usersDetailsController&#x27;, function ($scope, $http, $location, $routeParams, $route) &#123;</span><br><span class="line">    $scope.userId = $routeParams.id;</span><br><span class="line">    $http(&#123;method: &#x27;GET&#x27;, url: &#x27;http://localhost:8080/api/user/&#x27; + $scope.userId&#125;).then(function (response) &#123;</span><br><span class="line">        $scope.user = response.data;</span><br><span class="line">    &#125;);</span><br><span class="line">    $scope.submitUserForm = function () &#123;</span><br><span class="line">        $http(&#123;method: &#x27;POST&#x27;, url: &#x27;http://localhost:8080/api/user/&#x27;, data: $scope.user,&#125;)</span><br><span class="line">            .then(function (response) &#123;</span><br><span class="line">                $location.path(&quot;/list-all-users&quot;);</span><br><span class="line">                $route.reload();</span><br><span class="line">            &#125;, function (errResponse) &#123;</span><br><span class="line">                $scope.errorMessage = &quot;Error while updating User - Error Message: &#x27;&quot; + errResponse.data.errorMessage;</span><br><span class="line">            &#125;);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>来理解一下代码.在controller.js中的控制模块是基于应用需要携带不同参数的简单函数方法.</p>
<ol>
<li><p><strong>$scope:</strong> $scope 用于为此控制器负责的UI元素设置动态内容。$scope的概念在AngularJS中非常重要，因为它可以看作是允许模板，模型和控制器一起工作的粘合剂。AngularJS通过命名约定支持依赖项注入。AngularJS使用此$scope保持模型和视图分离但同步。<br>视图中所做的任何更改都会反映在模型中，而模型中所做的任何更改都会反映在视图中。</p>
</li>
<li><p><strong>$http:</strong> $http 服务是AngularJS提供的核心特色,被用作消费REST负责.也就是访问远程api</p>
</li>
</ol>
<h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p>就是简单理解下单页面应用的概念.通过AngularJS生命周期了解到不同阶段,例如引导阶段,编译阶段,运行数据绑定阶段.</p>
<p>然后了解了下 AngularJS的结构概念和MVC结构,通过把AngularJS添加到springboot项目里的pom.xml,来设置建立AngularJS开发环境</p>
<p>了解了AngularJS的不同的组件,还有model,view,controller的各种实现.</p>
<p>接下来,实现Spring security 去保护你开发的rest api,保护一个基于应用的网页和保护一个RESTful API 是不同的.因为</p>
<p>在基于应用的网页是需要人去有一个登陆动作去验证用户的.而在RESTfulAPI,可能是机器与机器的相互影响,或者是在不同开发语言中的不同开发者之间的影响</p>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://zhangbo4881820.gitee.io/myblog">brad 随风起舞</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://zhangbo4881820.gitee.io/myblog/posts/45226/">https://zhangbo4881820.gitee.io/myblog/posts/45226/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://zhangbo4881820.gitee.io/myblog" target="_blank">静待花开</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/myblog/tags/%E5%AE%9E%E6%88%98/">实战</a></div><div class="post_share"><div class="social-share" data-image="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/myblog/posts/20230/" title="全栈开发(Spring Security)"><div class="cover" style="background: var(--default-bg-color)"></div><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">全栈开发(Spring Security)</div></div></a></div><div class="next-post pull-right"><a href="/myblog/posts/42642/" title="玩转JAVA正则2"><div class="cover" style="background: var(--default-bg-color)"></div><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">玩转JAVA正则2</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/myblog/posts/21667/" title="全栈开发(RESTful和测试)"><div class="cover" style="background: var(--default-bg-color)"></div><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2019-11-06</div><div class="title">全栈开发(RESTful和测试)</div></div></a></div><div><a href="/myblog/posts/12008/" title="全栈开发(AngularJS)"><div class="cover" style="background: var(--default-bg-color)"></div><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2019-11-05</div><div class="title">全栈开发(AngularJS)</div></div></a></div><div><a href="/myblog/posts/20230/" title="全栈开发(Spring Security)"><div class="cover" style="background: var(--default-bg-color)"></div><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2019-11-04</div><div class="title">全栈开发(Spring Security)</div></div></a></div><div><a href="/myblog/posts/45057/" title="全栈开发(Spring Boot Actuator)"><div class="cover" style="background: var(--default-bg-color)"></div><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2019-11-07</div><div class="title">全栈开发(Spring Boot Actuator)</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png" onerror="this.onerror=null;this.src='/myblog/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">brad 随风起舞</div><div class="author-info__description">有些事情需要一辈子的沉淀</div></div><div class="card-info-data site-data is-center"><a href="/myblog/archives/"><div class="headline">文章</div><div class="length-num">57</div></a><a href="/myblog/tags/"><div class="headline">标签</div><div class="length-num">20</div></a><a href="/myblog/categories/"><div class="headline">分类</div><div class="length-num">25</div></a></div><a id="card-info-btn" href="https://github.com/xxxxxx"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/xxxxx" target="_blank" title="Github"><i class="fab fa-github" style="color: #24292e;"></i></a><a class="social-icon" href="mailto:xxxxxx@gmail.com" target="_blank" title="Email"><i class="fas fa-envelope" style="color: #4a7dbe;"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">This is my Blog</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#AngularJs%E7%9A%84%E5%9F%BA%E6%9C%AC%E7%BB%84%E4%BB%B6"><span class="toc-number">1.</span> <span class="toc-text">AngularJs的基本组件</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#AngularJs%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="toc-number">2.</span> <span class="toc-text">AngularJs的生命周期</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Bootstrap-Phase-%E5%BC%95%E5%AF%BC%E9%98%B6%E6%AE%B5"><span class="toc-number">2.1.</span> <span class="toc-text">Bootstrap Phase(引导阶段)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Compilation-Phase-%E7%BC%96%E8%AF%91%E9%98%B6%E6%AE%B5"><span class="toc-number">2.2.</span> <span class="toc-text">Compilation Phase(编译阶段)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Runtime-Data-Binding-Phase-%E8%BF%90%E8%A1%8C%E9%98%B6%E6%AE%B5"><span class="toc-number">2.3.</span> <span class="toc-text">Runtime Data Binding Phase(运行阶段)</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#AngularJs%E7%9A%84%E7%BB%93%E6%9E%84%E6%A6%82%E5%BF%B5"><span class="toc-number">3.</span> <span class="toc-text">AngularJs的结构概念</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#MVC%E7%BB%93%E6%9E%84"><span class="toc-number">4.</span> <span class="toc-text">MVC结构</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%AE%BE%E7%BD%AE%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83"><span class="toc-number">5.</span> <span class="toc-text">设置开发环境</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B0%86AngularJS%E6%B7%BB%E5%8A%A0%E5%88%B0spring-boot%E9%A1%B9%E7%9B%AE%E9%87%8C"><span class="toc-number">5.1.</span> <span class="toc-text">将AngularJS添加到spring boot项目里</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%8EGoogle-CDN%E5%8C%85%E5%90%AB%E4%B8%80%E4%B8%AAAngular-scripts"><span class="toc-number">5.1.1.</span> <span class="toc-text">从Google CDN包含一个Angular scripts</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9C%A8%E6%9C%AC%E5%9C%B0%E4%B8%8B%E8%BD%BD%E5%92%8C%E6%89%98%E7%AE%A1Angular%E6%96%87%E4%BB%B6"><span class="toc-number">5.1.2.</span> <span class="toc-text">在本地下载和托管Angular文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9C%A8spring-boot-%E9%A1%B9%E7%9B%AE%E7%9A%84pom-xml%E4%B8%AD%E6%8F%90%E4%BE%9B%E4%BE%9D%E8%B5%96%E4%BF%A1%E6%81%AF"><span class="toc-number">5.1.3.</span> <span class="toc-text">在spring boot 项目的pom.xml中提供依赖信息</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B7%BB%E5%8A%A0Twitter-Bootstrap%E5%88%B0spring-boot"><span class="toc-number">5.2.</span> <span class="toc-text">添加Twitter Bootstrap到spring boot</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BC%80%E5%8F%91%E5%8D%95%E9%A1%B5%E9%9D%A2%E5%BA%94%E7%94%A8"><span class="toc-number">5.3.</span> <span class="toc-text">开发单页面应用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BC%95%E5%AF%BC%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F"><span class="toc-number">5.4.</span> <span class="toc-text">引导应用程序</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85%A5"><span class="toc-number">5.5.</span> <span class="toc-text">依赖注入</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#AngularJS-Routes"><span class="toc-number">5.6.</span> <span class="toc-text">AngularJS Routes</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#AngularJS-Templates"><span class="toc-number">5.7.</span> <span class="toc-text">AngularJS Templates</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%9E%E7%8E%B0-the-Model-View-and-Controller-%E5%9C%A8%E4%BD%A0%E7%9A%84%E5%8D%95%E9%A1%B5%E9%9D%A2%E5%BA%94%E7%94%A8%E4%B8%AD"><span class="toc-number">5.8.</span> <span class="toc-text">实现 the Model, View, and Controller 在你的单页面应用中</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%9B%E5%BB%BA-Home-Application-%E9%A1%B5%E9%9D%A2"><span class="toc-number">5.9.</span> <span class="toc-text">创建 Home&#x2F;Application 页面</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%9B%E5%BB%BA%E8%A7%86%E5%9B%BE%E9%A1%B5%E9%9D%A2"><span class="toc-number">5.10.</span> <span class="toc-text">创建视图页面</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Home-Page"><span class="toc-number">5.10.1.</span> <span class="toc-text">Home Page</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Register-New-User-page"><span class="toc-number">5.10.2.</span> <span class="toc-text">Register New User page</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#List-of-Users"><span class="toc-number">5.10.3.</span> <span class="toc-text">List of Users</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Update-Existing-User"><span class="toc-number">5.10.4.</span> <span class="toc-text">Update Existing User</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%9B%E5%BB%BAAngulaarJS-JS%E6%A8%A1%E5%9D%97"><span class="toc-number">5.11.</span> <span class="toc-text">创建AngulaarJS JS模块</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%80%BB%E7%BB%93"><span class="toc-number">6.</span> <span class="toc-text">总结</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/myblog/posts/15695/" title="jenkins（1）">jenkins（1）</a><time datetime="2023-09-14T02:17:44.000Z" title="发表于 2023-09-14 10:17:44">2023-09-14</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/myblog/posts/22012/" title="wsl的Ubuntu子系统（1）">wsl的Ubuntu子系统（1）</a><time datetime="2023-09-13T08:42:19.000Z" title="发表于 2023-09-13 16:42:19">2023-09-13</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/myblog/posts/30302/" title="effective-java-(接口优于抽象类)">effective-java-(接口优于抽象类)</a><time datetime="2023-09-12T08:12:48.000Z" title="发表于 2023-09-12 16:12:48">2023-09-12</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/myblog/posts/9473/" title="effective-java(创建和销毁对象--组合的形式优于继承)">effective-java(创建和销毁对象--组合的形式优于继承)</a><time datetime="2023-09-11T08:23:19.000Z" title="发表于 2023-09-11 16:23:19">2023-09-11</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/myblog/posts/16107/" title="Hello World">Hello World</a><time datetime="2023-09-07T09:44:01.910Z" title="发表于 2023-09-07 17:44:01">2023-09-07</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2023 By brad 随风起舞</div><div class="framework-info"><span>框架 </span><a href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/myblog/js/utils.js"></script><script src="/myblog/js/main.js"></script><script src="/myblog/js/fancybox.umd.js"></script><div class="js-pjax"></div><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div class="no-result" id="local-search-results"></div><div id="local-search-stats-wrap"></div></div></div><div id="search-mask"></div><script src="/myblog/js/search/local-search.js"></script></div></div></body></html>